<template>
  <div>
    <!-- 详情内容 -->
    <div class="pad_10 white_box">
      <div class="dis_flex">
        <div>本次培训讲座是否听懂：</div>
        <div>
          <van-radio-group shape="square" v-model="form.is_know" @change="changeIsKnow">
            <van-radio name="1" checked-color="#00AEFF">是</van-radio>
            <van-radio name="0" checked-color="#00AEFF">否</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="dividing_line"></div>
      <div>
        <div>个人心得总结：</div>
        <textarea name="" id="" class="desc_txt" placeholder="请输入个人心得总结" v-model="form.learning"></textarea>
      </div>
    </div>
    <!-- 评价 -->
    <div class="pad_10 white_box mar_bot10">
      <div class="dis_flex">
        <div>对于培训内容的评价：</div>
        <van-rate v-model="form.content_level" color="#00aeff" void-icon="star" />
      </div>
      <div class="dividing_line"></div>
      <div>课程建议：</div>
      <textarea name="" id="" class="desc_txt" placeholder="请输入课程建议" v-model="form.suggestion"></textarea>
    </div>
    <!-- 水准评价 -->
    <div class="pad_10 white_box mar_bot10">
      <div class="dis_flex">
        <div>对于讲师水准的评价：</div>
        <van-rate v-model="form.lecturer_level" color="#00aeff" void-icon="star" />
      </div>
      <div class="dividing_line"></div>
      <div>讲师评价：</div>
      <textarea name="" id="" cols="30" rows="10" class="desc_txt" placeholder="请输入文本。"
        v-model="form.lecturer_evaluate"></textarea>
    </div>
    <div class="submit_btn" @click="toSubmit">提交</div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      value: 3,
      checked: true,
      is_know: "1",
      activeIcon: require("@/assets/images/function/radio_check.png"),
      inactiveIcon: require("@/assets/images/function/radio_no_check.png"),
      form: {}
    };
  },
  created() {
    this.form = {
      is_know: String(this.info.is_know),
      learning: this.info.learning,
      content_level: this.info.content_level,
      lecturer_level: this.info.lecturer_level,
      suggestion: this.info.suggestion,
      lecturer_evaluate: this.info.lecturer_evaluate,
    }
  },
  methods: {
    //提交
    async toSubmit() {
      let par = {
        is_know: this.form.is_know,
        learning: this.form.learning,
        content_level: this.form.content_level,
        lecturer_level: this.form.lecturer_level,
        suggestion: this.form.suggestion,
        lecturer_evaluate: this.form.lecturer_evaluate,
      }
      this.$emit('submitFeedback', par)
    },
    changeIsKnow(val) {
      this.form.is_know = val
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-radio-group {
  display: flex;
}

::v-deep .van-radio {
  margin-right: 21.33px;

  &:last-child {
    margin: 0;
  }
}

::v-deep .van-radio__label {
  font-size: 14px;
  color: #333333;
}

::v-deep .van-radio__icon .van-radio__icon--round .van-radio__icon--checked {
  width: 15.33px;
  height: 15.33px;
}

.dis_flex {
  display: flex;
  align-items: center;
}

.just_center {
  justify-content: center;
}

.white_box {
  background: #ffffff;
  border-radius: 6.67px;
}

.mar_bot10 {
  margin-bottom: 10px;
}

.pad_10 {
  padding: 10px;
}

.historical_det {
  background-color: #f4f6fa;
  color: #333333;
  font-size: 14px;
}

.det_cont {
  padding: 10px 10px 0 10px;
}

.dividing_line {
  margin: 16.33px 0 13.67px;
  border-bottom: 0.33px solid #dddddd;
}

.radio_icon {
  width: 15.33px;
  height: 15.33px;
}

.desc_txt {
  width: 100%;
  height: 143.33px;
  padding: 16px 10px 18px 10px;
  background-color: rgba(51, 51, 51, 0.05);
  margin-top: 13px;
  border-radius: 6.67px;
  line-height: 24px;
}

textarea {
  border: 0;
  box-sizing: border-box;
}

.submit_btn {
  width: 333.33px;
  height: 46.67px;
  line-height: 46.67px;
  margin: 26px auto;
  text-align: center;
  color: #fff;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #0aa7f4;
  border-radius: 6.67px;
}
</style>